<template>
    <div>
        <!--取消授权/用户管理页-->
        <el-row v-if="displayType==='cancel'">
          <el-row>
            <el-col :span="10" class="firstBtn">
                用户姓名：<el-input type="text" style="width:70%" size="small" v-model="query.username" placeholder="模糊查询"></el-input>
            </el-col>
            <el-col :span="1.5" class="btn">
              <el-button size="mini" type="primary" plain icon="el-icon-search" @click="screen()">查询</el-button>
            </el-col>
            <el-col :span="1.5" class="btn">
              <el-button size="mini" type="danger" plain icon="el-icon-delete-solid" @click="cancel()">批量取消授权</el-button>
            </el-col>
            <el-col :span="1.5" class="btn">
              <el-button size="mini" type="primary" plain icon="el-icon-refresh-left" @click="toggleSelection()">取消选择</el-button>
            </el-col>
            <el-col :span="1.5" class="btn">
              <el-button size="mini" type="info" plain icon="el-icon-refresh" @click="query.username='',f5()">重置</el-button>
            </el-col>
          </el-row>
          <el-table v-loading="loading" :data="diaplayTableData" ref="multipleTable" @selection-change="handleSelectionChange" style="width: 98%">
            <el-table-column type="selection" width="40">
            </el-table-column>
            <el-table-column label="姓名" prop="username" width="150">
            </el-table-column>
            <el-table-column label="所属部门" width="110" prop="tag">
              <template slot-scope="scope">
                <el-tag disable-transitions>{{scope.row.orgName}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="邮件地址" width="180" prop="email" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger" icon="el-icon-delete"
                  @click="cancel(scope.row)">取消授权</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="page-box">
            <el-pagination background
              layout="total, prev, pager, next, sizes, jumper" 
              :current-page.sync="query.pageNo" 
              :page-size.sync="query.pageSize" 
              :total="dataCount" 
              :page-sizes="[1,2, 10, 20, 30, 40, 50, 100]" 
              @current-change="f5('currentChange',true)" 
              @size-change="f5('',true)">
            </el-pagination>
          </div>
        </el-row>
        <!--分配用户页-->
        <el-row v-if="displayType==='assign'">
          <el-row>
            <el-col :span="10" class="firstBtn">
                用户姓名：<el-input type="text" style="width:70%" size="small" v-model="query.username" placeholder="模糊查询"></el-input>
            </el-col>
            <el-col :span="1.5" class="btn">
              <el-button size="mini" type="primary" plain icon="el-icon-search" @click="screen()">查询</el-button>
            </el-col>
            <el-col :span="1.5" class="btn">
              <el-button size="mini" type="success" plain icon="el-icon-plus" @click="assign()">批量授权</el-button>
            </el-col>
            <el-col :span="1.5" class="btn">
              <el-button size="mini" type="primary" plain icon="el-icon-refresh-left" @click="toggleSelection()">取消选择</el-button>
            </el-col>
            <el-col :span="1.5" class="btn">
              <el-button size="mini" type="info" plain icon="el-icon-refresh" @click="query.username='',f5()">重置</el-button>
            </el-col>
          </el-row>
          <el-table v-loading="loading" :data="diaplayTableData" ref="multipleTable" @selection-change="handleSelectionChange" style="width: 98%">
            <el-table-column type="selection" width="40">
            </el-table-column>
            <el-table-column label="姓名" prop="username" width="110">
            </el-table-column>
            <el-table-column label="所属部门" width="110" prop="tag">
              <template slot-scope="scope">
                <el-tag disable-transitions>{{scope.row.orgName}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="当前角色" width="110" prop="tag">
              <template slot-scope="scope">
                <el-tag disable-transitions>{{scope.row.roleName}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="邮件地址" width="170" prop="email" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary" icon="el-icon-plus"
                  @click="assign(scope.row)">授权</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="page-box">
            <el-pagination background
              layout="total, prev, pager, next, sizes, jumper" 
              :current-page.sync="query.pageNo" 
              :page-size.sync="query.pageSize" 
              :total="dataCount" 
              :page-sizes="[1,5,10,20,100]" 
              @current-change="f5('currentChange',true)" 
              @size-change="f5('',true)">
            </el-pagination>
          </div>
        </el-row>
    </div>
</template>

<script>
export default {
    data(){
        return{
          tableData:[],
          diaplayTableData:[],
          query:{
            username: '',
            pageNo: 1,
            pageSize: 5,
          },
          dataCount:0,
          currentCount:'',
          info:{},
          multipleSelection: [],//当前选中行数组
          loading:false
        }
    },
    props:['displayType','roleid'],
    methods:{
      //刷新
      f5(type,isPage){
        this.loading=true
        if(type=="currentChange"){
          this.currentCount=(parseInt(this.query.pageNo)-1)*parseInt(this.query.pageSize)
        }else{
          this.query.pageNo=1
          this.currentCount=0
        }
        this.request('/api/role/getUserAndOrgForRole?id='+this.roleid+'&&type='+this.displayType+'&&startIndex='+this.currentCount+'&&pageSize='+this.query.pageSize).then(res=>{
          if(!res){return}
          //console.log(res);
          if(isPage){
            this.diaplayTableData=res.data.data
          }else{
            this.tableData=res.data.data
            this.diaplayTableData=this.tableData
          }
          //console.log(this.tableData);
          this.dataCount=res.data.dataCount
          this.loading=false
        })
      },
      //取消授权（含批量
      cancel(data){
        let params=[];
        //处理参数，批量和单一两种情况
        if(data!==undefined&&data!==null){
          params.push(data)
        }else{
          params=this.multipleSelection;
        }
        //console.log(params);
        if(params.length==0){
            this.$message.error("您尚未选择要操作的用户！");
					  return;
        }
        this.requestJson('/api/role/cancel',params,{'Content-Type': 'application/json'}).then(res=>{
          if(!res){return}
          this.$message.success("取消角色授权成功！")
          //刷新用户权限信息
          this.$bus.$emit('refUserPerm')
          this.f5()
        })
      },
      //用户授权（含批量
      assign(data){
        let params=[];
        //处理参数，批量和单一两种情况
        if(data!==undefined&&data!==null){
          params.push(data)
        }else{
          params=this.multipleSelection;
        }
        console.log(params);
        if(params.length==0){
            this.$message.error("您尚未选择要操作的用户！");
					  return;
        }
        const map={"roleId":this.roleid,"list":params}
        this.requestJsonMap('/api/role/assign',map,{'Content-Type': 'application/json'}).then(res=>{
          if(!res){return}
          this.$message.success("授权成功！")
          this.f5()
          //刷新用户权限信息
          this.$bus.$emit('refUserPerm')
        })
      },
      //模糊查询
      screen(){
        let username=this.query.username
        this.diaplayTableData=this.tableData.filter((element)=>{
          return element.username.includes(username)
        })
        this.dataCount=this.diaplayTableData.length
      },
      //列表行选择
			handleSelectionChange(val){
				this.multipleSelection=val;
			},
      //取消当前的选择
			toggleSelection(){
        if(this.multipleSelection.length==0){
          this.$message.warning("您暂未进行选择");
          return
        }
				this.$refs.multipleTable.clearSelection();
			},
    },
    mounted(){
      this.f5()
    }
}
</script>

<style scoped>
/*按钮与表格的对齐间距等等 */
.firstBtn{
  padding-left:10px;
  padding-right:5px;
  margin-bottom: 5px;
}
.btn{
  padding-right:5px;
  margin-bottom: 5px;
  float: right;
}
.btn{
  padding-right:5px;
  margin-bottom: 5px;
  float: right;
}
</style>